<script setup >
import { useRoute, useRouter } from 'vue-router'
import { getMemberCart, postGoodsList } from '@/api/cart'
import { onMounted, ref, watch } from 'vue'
import { showImagePreview, showDialog ,showSuccessToast} from 'vant';
import { useCounterStore } from '@/stores/counter'

const router = useRouter()
const route = useRoute()
const userStore = useCounterStore()

const list = userStore.list
const listData = ref([])
const img = ref('')
let proNum = ref(1)
const totalPrice = ref(proNum.value * listData.value.price)
onMounted(() => {
    postGoodsList({
        id: route.query.id
    }).then(res => {
        listData.value = res.data.result
        img.value = listData.value.mainPictures[0]
        totalPrice.value = proNum.value * listData.value.price
        // console.log(proNum.value * listData.value.price);
    })
})

const disabledList = ref([
    {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '北京市昌平区沙洋路18号，北京科技职业技术学院，千锋教育',
        isDefault: true,
    },
]);

function decBtn() {
    if (proNum.value === 1) return
    proNum.value--
    totalPrice.value = proNum.value * listData.value.price
}
function btnAdd() {
    proNum.value++
    totalPrice.value = proNum.value * listData.value.price
}

let flag = ref(true)
//点击 编辑地址
function onEdit() {
    flag.value = false
    // console.log(flag.value);
}

const areaList = ref({
    id: '',
    name: '',
    tel: '',
    address: '',
    isDefault: true,
})
//提交地址
function onSubmit() {
    flag.value = true
    // console.log(flag.value);
    disabledList.value[0] = areaList.value
}
//提交订单
function btnPrice() {
    showDialog({
        title: '总价格',
        message: `一共${totalPrice.value}元`,
    }).then(() => {
        // on close
        showSuccessToast('购买成功')
        router.push('/cart')
    });
}
//历史返回
function onClickLeft() {
    history.back();
}

</script>


<template>
    <div>
        <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />

        <div class="box1" v-if="flag">
            <van-address-list v-model="disabledList.id" :list="disabledList" @edit="onEdit" />
            <van-card v-if="img" :num="proNum" :price="listData.price" :desc="listData.desc" :title="listData.name"
                :thumb="img">
                <template #tags>
                    <van-tag plain type="primary">折扣</van-tag>
                    <van-tag plain type="primary">爆品</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini" @click="decBtn">减少</van-button>
                    <van-button size="mini" @click="btnAdd">增加</van-button>
                </template>
            </van-card>
            <van-submit-bar :price="totalPrice * 100" button-text="提交订单" @click="btnPrice" />
        </div>

        <div class="box2" v-if="!flag">
            <!-- 地址 -->
            <van-form>
                <van-cell-group inset>
                    <van-field v-model="areaList.name" name="姓名" label="姓名" placeholder="姓名"
                        :rules="[{ required: true, message: '姓名' }]" />
                    <van-field v-model="areaList.tel" name="电话" label="电话" placeholder="电话"
                        :rules="[{ required: true, message: '电话' }]" />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field v-model="areaList.id" name="地区" label="地区" placeholder="地区"
                        :rules="[{ required: true, message: '地区' }]" />
                    <van-field v-model="areaList.address" name="详细地址" label="详细地址" placeholder="详细地址"
                        :rules="[{ required: true, message: '详细地址' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" @click="onSubmit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
    border-bottom: 1px solid black;
}

.header {
    width: 100%;
    height: 0.44rem;
    background-color: #f66;
    line-height: 0.44rem;
    text-align: center;
    color: white;
}

.van-address-list {
    height: 1.2rem;
}

.van-address-list__bottom {
    display: none;
}

// .van-button--primary {
//     display: none;
// }

.van-submit-bar {
    position: relative;
    z-index: 999;
    bottom: -3.12rem;
}
</style>